<template>
  <el-dialog
    title="联单信息"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <div  v-loading="loading">
      <el-card shadow="never" class="box-card" style="width: 100%" id="printArea">
        <div style="text-align: center;font-weight: bold;font-size: 18px;margin-bottom: 10px">建筑垃圾电子转移单</div>
        <el-descriptions class="margin-top" :column="2" border :labelStyle="{'width':'180px'}">
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">联单编号</div>
            </template>
            {{ order.tranOrderCode }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">二维码</div>
            </template>
            <img v-if="codeUrl" :src="codeUrl" style="width: 80px;height: 80px">
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 10px">
          建筑垃圾移除信息
        </div>
        <el-descriptions class="margin-top" :column="2" border :labelStyle="{'width':'180px'}">
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center">移出地名称</div>
            </template>
            {{ order.constructionSiteName }}
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center">移出地地址</div>
            </template>
            {{order.soilFieldNameAddr}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">施工单位</div>
            </template>
            {{ order.implementationUnit }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">交付时间</div>
            </template>
            {{ order.startTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">垃圾种类</div>
            </template>
            {{ order.wasteTypeText }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">移出量（吨）</div>
            </template>
           {{order.removalQuantity}}
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 10px">
          建筑垃圾运输信息
        </div>
        <el-descriptions class="margin-top" :column="2" border :labelStyle="{'width':'180px'}">
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">承运单位</div>
            </template>
            {{ order.transportationCompanyName }}
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center">车牌号</div>
            </template>
            {{order.plate}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">驾驶员</div>
            </template>
            {{ order.driverName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">联系电话</div>
            </template>
            {{ order.driverPhone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">运输起点<br/>(默认移出地地址)</div>
            </template>
            {{ order.soilFieldNameAddr }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">运输终点<br/>(默认接收地地址)</div>
            </template>
            {{ order.soilSiteAddress }}
          </el-descriptions-item>
        </el-descriptions>

        <div style="margin: 10px">
          建筑垃圾接收信息
        </div>
        <el-descriptions class="margin-top" :column="2" border :labelStyle="{'width':'180px'}">
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center;">处置场所名称<br/>(土方平衡项目名称)</div>
            </template>
            {{ order.soilSiteCompanyName }}
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center">接收地地址</div>
            </template>
            {{order.soilSiteAddress}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">处置场所负责人</div>
            </template>
            {{ order.manager }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">接收时间</div>
            </template>
            {{ order.endTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">垃圾种类</div>
            </template>
            {{ order.wasteTypeText }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <div style="text-align: center">接收量（吨）</div>
            </template>
            {{order.receivingQuantity }}
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template slot="label">
              <div style="text-align: center">备注</div>
            </template>
            {{ order.remark }}
          </el-descriptions-item>
        </el-descriptions>

      </el-card>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" v-print="print">打印预览</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getOrder} from "@/api/wasterTran/order";
import { generateQRCode } from "@/api/util/qrcode";
export default {
  data() {
    return {
      visible: false,
      loading: true,
      print: {
        id: 'printArea',
        popTitle: '打印', // 打印配置页上方标题
        extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {
        }, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {
        }, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback() {
          console.log(1123)
        }, // 开启打印前的回调事件
        openCallback() {
          console.log(2123)
        }, // 调用打印之后的回调事件
        closeCallback() {
          console.log(3123)
        }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
      },
      order:'',
      orderId:'',
      wasteTypeList: [{
        'value': 0,
        'label': '装修垃圾'
      }, {
        'value': 1,
        'label': '工程渣土'
      }, {
        'value': 2,
        'label': '工程泥浆'
      }, {
        'value': 3,
        'label': '建筑材料'
      }, {
        'value': 4,
        'label': '拆除垃圾'
      }],
      codeUrl:''
    }
  },
  methods: {
    init(orderId) {
      this.codeUrl = ''
      console.log(orderId)
      this.orderId = orderId
      this.visible = true
      this.getList()
    },
    //显示二维码
    generateQRCode(row) {
      // 发送请求获取二维码图片
      generateQRCode(row.id)
        .then(response => {

          this.codeUrl = "data:image/gif;base64," + response.img;
          this.qeCodeOpen = true;
        })
        .catch(error => {
          console.error('Error:', error);
          // 处理错误情况
        });
    },
    getList() {
      this.loading = true;
      getOrder(this.orderId).then(response => {
        let order = response.data;
        for (const wasteType of this.wasteTypeList) {
          if(order.wasteType==wasteType.value){
            order.wasteTypeText = wasteType.label
          }
        }
        this.order = order
        console.log(this.order)
        this.generateQRCode(order)
        this.loading = false;
      });
    },
  }
}
</script>
